<!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>统计查询</title> 
    <link rel="shortcut icon" href="favicon.ico">
	<link href="${WEB_PATH}/resources/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
	<link href="${WEB_PATH}/resources/css/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <link href="${WEB_PATH}/resources/css/plugins/bootstrap-table/bootstrap-editable.css" rel="stylesheet">
    <link href="${WEB_PATH}/resources/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="${WEB_PATH}/resources/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="${WEB_PATH}/resources/css/style.min.css?v=5.0.0" rel="stylesheet"><base target="_blank">
	<link href="${WEB_PATH}/resources/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
	<link href="${WEB_PATH}/resources/js/plugins/datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet">
	<link href="${WEB_PATH}/resources/css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet">
    <link href="${WEB_PATH}/resources/css/plugins/jsTree/style.min.css" rel="stylesheet">
	<link href="${WEB_PATH}/resources/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css" rel="stylesheet">
	<#import "/common/import.ftl" as import>
    <@import.tableManagerImportCss/>
    <style>
    .widget.style1 h2 {
	    font-size: 40px;
	}
	.widget.style1 h3{
	    font-size: 24px;
	}
	.demo:after {
	    background-color: #F5F5F5;
	    border: 1px solid #DDDDDD;
	    border-radius: 4px 0 4px 0;
	    color: #9DA0A4;
	    content: "条件查询：";
	    font-size: 12px;
	    font-weight: bold;
	    left: -1px;
	    padding: 3px 7px;
	    position: absolute;
	    top: -1px;
	}
	.demo {
	    margin-left: 0px;
	    padding:40px 15px 0px;
	    border: 1px solid #DDDDDD;
	    border-radius: 4px;
	    position: relative;
	    word-wrap: break-word;
	}
	</style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight"> 
       <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5><span id="areaName">异地检测量统计</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content" style="height: auto;">
                         <div class="row row-lg">  
	                         <div style="" class="demo ui-sortable">
	                    		 <div class="row"> 
		                            <div class="col-sm-3">
		                                <div class="form-group">
		                                    <label><#if USER.userType == 'st' >所属地州：<#else>所属区县：</#if></label>
	    									<select style="width:200px;"  name="areaId" id="areaId">
				                        		 <option value="all"  >全部</option> 
				                        	     <#list areaListMap as info>
									                 <option value="<#if info.level_type == 2 >${info.ID[0..3]}<#else>${info.ID}</#if>" hassubinfo="true">${info.name}</option>
									             </#list>
					                        </select>
		                                </div>
		                            </div>
		                            <div class="col-sm-4" id="organization_id" >
					                     <div class="form-group">
		                               	 	<label>检验时间：</label>
			                                <div id="data">
			                                    <div class="input-daterange input-group" id="datepicker">
					                                <input type="text" class="input-sm form-control" name="start" id="start" value="" placeholder="选择查询开始时间"/>
					                                <span class="input-group-addon">到</span>
					                                <input type="text" class="input-sm form-control" name="end" id="end" value="" placeholder="选择查询结束时间"/>
					                            </div>
		                               		</div>
		                                </div>
					                </div> 
					                <div class="col-sm-2" style="padding-top: 22px;">
	                                 <button type="button" class="btn btn-primary" id="search"> <i class="fa fa-search"></i>&nbsp;&nbsp;&nbsp;查询</button>
	                            	</div>  
		                        </div>
		                    </div>
	                         <div class="row" style="padding-top: 10px;">
	                          	<div class="col-sm-5" id="echarts-jcbg-bar">
	                          		<table id="exampleTableEvents" data-mobile-responsive="true" data-height="625">
	                                    <thead>
	                                        <tr>
	                                        	<th data-formatter="indexFormatter" data-width="20px" data-align="center">序号</th> 
									            <th data-field="JYJGMC">检验机构名称</th> 
									            <th data-field="ydcljcs" data-formatter="ydcljcsFormatter" data-width="280px">异地车辆检测数</th> 
	                                        </tr>
	                                    </thead>
	                                </table>
	                          	</div>
		           			  	<div class="col-sm-7">
		           			  	    <div id="ydjcsl-bar" style="border: 1px solid rgb(221, 221, 221);border-radius: 4px;padding: 0px;">
		           			  			<div id="echarts-ydjcsl-bar" style="height:600px;"></div>
		           			  		</div>
		           			  	</div>
		           			 </div>
	           			 </div>
                    </div>
                </div>
            </div>
        </div>
       <!-- End Panel Other -->
    </div>
<@import.tableManagerImportScript/>
<script src="${WEB_PATH}/resources/js/plugins/datapicker/bootstrap-datepicker.js"></script>
<script src="${WEB_PATH}/resources/js/plugins/switchery/switchery.js"></script>
<script src="${WEB_PATH}/resources/js/plugins/echarts/echarts-all.js"></script>
<script src="${WEB_PATH}/resources/js/city-picker.data.js"></script>
<script src="${WEB_PATH}/resources/js/city-picker.js"></script>
	<script>
	var pageNum = 1;
	var title = '${areaName}';
	
	$("#data .input-daterange").datepicker({
		        language:'zh-CN',
				format:'yyyy-mm-dd',
		     	keyboardNavigation: !1,
	       	 	forceParse: !1,
	        	autoclose: !0
	});
	 $("#start").change(function(){
	    	var end = $("#end").val();
	    	var start = $("#start").val();
	    	if(end == null || "" == end){
	    		$("#end").val(start);
	    	}else{
	    		var end1 = end.replace("-","");
	    		var start1 = start.replace("-","");
	    		if(end1 < start1){
	    			$("#end").val(start);
	    		}
	    	}
	    });
	    $("#end").change(function(){
	    	var end = $("#end").val();
	    	var start = $("#start").val();
	    	if(start == null || "" == start){
	    		$("#start").val(end);
	    	}else{
	    		var end1 = end.replace("-","");
	    		var start1 = start.replace("-","");
	    		if(end1 < start1){
	    			$("#start").val(end);
	    		}
	    	}
	    });
	 
	$(function(){
		  $(window).resize(function () {
	        $('#exampleTableEvents').bootstrapTable('resetView');
	      }); 

	      $("#areaId").chosen({width:'100%'}); 
	      
	    function queryParams(params) {
	        $("#ydjcsl-bar").html('<div id="echarts-ydjcsl-bar" style="height:600px;"></div>');
	    	var echarts_tjbghgs = echarts.init(document.getElementById("echarts-ydjcsl-bar"));
		    echarts_tjbghgs.showLoading({
		        text: "图表数据正在努力加载..."
		    });
	        var temp = {  
		        limit: params.limit,  
		        offset: params.offset, 
		        startTime:$("#start").val(),
	        	endTime:$("#end").val(), 
	        	areaId:$("#areaId").val(),
		        maxrows:params.limit,
		        pageindex:params.pageNumber,
	        };
	        return temp;
		}
	   
        //加载table数据
    	var $tableData = $("#exampleTableEvents").bootstrapTable({
            url: "${WEB_PATH}/ports/report/statisYdjclJyjg.do",
            method: 'get',
            pagination:true,
            pageNumber:1,  
            pageSize:15,
            pageList:[0],
            showRefresh:false, 
            showColumns:false,
            showFooter:false,
            showPaginationSwitch:false,
            paginationVAlign:'bottom',
            paginationLoop:false,
            iconSize: "outline",
            sidePagination: "server", //设置为服务器端分页
            queryParams: queryParams,//参数
            minimumCountColumns: 1,  
            showToggle:false, 
            clickToSelect: true,  
            onLoadSuccess: function(data){  //加载成功时执行  
              	if(data.total > 0){
		  			initStatistics(data.rows);
		  		}else{
		  			$("#ydjcsl-bar").html('<div id="table_not_resultt" style="padding: 20%;color: #1ab394;text-align: center;height:600px;"><h1> <i class="iconfont" style="font-size:50px;font-style:normal;"></i></h1>没有找到匹配的记录<div></div></div>');
		  			$("#table_not_result").css("height","545px");
		  		}
            },
            onPageChange: function(number, size){  //加载成功时执行  
            	 pageNum = number;
            }
        });
        
        $("#search").click(function(){
        	$("#exampleTableEvents").bootstrapTable('refresh');
        	if($("#areaId option:selected").text() != '全部'){
        		title = $("#areaId option:selected").text();
        	}else{
        		title = '${areaName}'
        	}
        	
        });
        
        
	});
	
	function indexFormatter(value, row, index) {  
		var indexNum =  (pageNum-1)*10;
        return indexNum+1+index;  
    }
    function ydcljcsFormatter(value, row, index) {  
          return '<font style="color:red;">总数：'+row.sumCount+'</font> = (<font style="color:#ff7f50;">外省车辆：'+row.sw+'</font> + <font style="color:#87cefa;">省内车辆：'+row.sn+'</font>)';  
    }
	
	function initStatistics(tableData){
	      var echarts_tjbghgs = echarts.init(document.getElementById("echarts-ydjcsl-bar"));
		  var option = initOption(tableData);
		  echarts_tjbghgs.setOption(option), 
		  $(window).resize(echarts_tjbghgs.resize);
		  echarts_tjbghgs.hideLoading();
	}
	
	
	function initOption(tableData){
		var y_data = new Array(); 
		var sn_data = new Array();
		var sw_data = new Array();
		for(var i=tableData.length-1;i>=0;i--){
			y_data.push(tableData[i].JYJGMC);
			if(tableData[i].sn == 0){
				var value={
                    value: tableData[i].sn,
                    itemStyle : { normal: {label : {show: false}}}
                };
                sn_data.push(value);
			}else{
				sn_data.push(tableData[i].sn);
			}
			if(tableData[i].sw == 0){
				var value={
                    value: tableData[i].sw,
                    itemStyle : { normal: {label : {show: false}}}
                };
                sw_data.push(value);
			}else{
				sw_data.push(tableData[i].sw);
			}
			
		} 
		
	    option = {
	         title : {
	         	x: 'center',
		        text: title+'各检测机构异地车辆检测数量'
		    },
		    tooltip : {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
		        },
		        formatter: function (params){
		            return params[0].name + '<br/>'
		                   + params[0].seriesName + ' : ' + params[0].value + '(辆)<br/>'
		                   + params[1].seriesName + ' : ' + params[1].value + '(辆)<br/>'
		                   + '总数 : ' + (params[1].value + params[0].value)+ '(辆)';
		        }
		    },
		    legend: {
		        y: 'bottom',
		        data:['外省车辆', '省内车辆']
		    },
		    calculable : true,
		    xAxis : [
		        {
		            type : 'value'
		        }
		    ],
		    yAxis : [
		        {
		            type : 'category',
		            data : y_data
		        }
		    ],
		    grid:{
		       x:250,
		       x2:30
		    },
		    series : [
		         
		        {
		            name:'外省车辆',
		            type:'bar',
		            stack: '总量',
		            itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
		            data:sw_data
		        },
		        {
		            name:'省内车辆',
		            type:'bar',
		            stack: '总量',
		            itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
		            data:sn_data
		        } 
		    ]
		};
		return option;
	}
    </script>
</body>

</html>